<template>
	<view>
		<uni-nav-bar background-color="#3286ed" :statusBar="true" :fixed='true' color="#fff" title="请假申请" left-icon="left"   @clickLeft="backFn"  ></uni-nav-bar>
	<view class="tabs">
		  <u-tabs :current="index" :list="list1" @click="clickTabs" :itemStyle="{height:'45px',width:'30%'}" lineWidth="50px"></u-tabs>
	</view>
	<view v-show="showTabs==0" class="form">
		<u--form class="form" labelPosition="left" labelWidth="120px" :model="form" :rules="rules" ref="form">
			<u-form-item  @click="showType=true" class="item" labelPosition="top" leftIcon="*" leftIconStyle="color:red;"  label="请假类型" prop="leaveTypedou" borderBottom ref="item1">
			    <u--input disabled disabledColor="#fff" v-model="form.leaveTypedou" border="none"
			        placeholder="请选择请假类型"></u--input>
			    <u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item  @click="openTime(1)" class="item" labelPosition="top" leftIcon="*" leftIconStyle="color:red;"  label="开始时间" prop="leaveStartTime" borderBottom ref="item1">
			    <u--input disabled disabledColor="#fff" v-model="form.leaveStartTime" border="none"
			        placeholder="开始时间"></u--input>
			    <u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item  @click="openTime(2)" class="item" labelPosition="top" leftIcon="*" leftIconStyle="color:red;"  label="结束时间" prop="leaveEndTime" borderBottom ref="item1">
			    <u--input disabled disabledColor="#fff" v-model="form.leaveEndTime" border="none"
			        placeholder="结束时间"></u--input>
			    <u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item class="item" labelPosition="top" leftIcon="*" leftIconStyle="color:red;"  label="时长/天" prop="leaveDuration" borderBottom ref="item1">
			    <u--input disabled disabledColor="#fff" v-model="form.leaveDuration" border="none"
			        placeholder="时长/天"></u--input>
			    <u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item class="item" labelPosition="top" leftIcon="*" leftIconStyle="color:red;"  label="请假原因" prop="leaveReason" borderBottom ref="item1">
			    <u--input  v-model="form.leaveReason" border="none"
			        placeholder="申请原因"></u--input>
			    <u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item class="item" labelPosition="top" leftIcon="*" leftIconStyle="color:red;"  label="时长" prop="remark" borderBottom ref="item1">
			    <u--input  v-model="form.remark" border="none"
			        placeholder="备注"></u--input>
			    <u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			</u--form>
			<!-- 底部按钮 -->
			<view class="form_bottom">
				<view class="form_bottom_left" @click="addForm">
					<uni-icons color="#606266" custom-prefix="iconfont" type="icon-kaoqindaqia" size="20"  class="iconBox" style="font-size: 20px;background-color: #fff;"></uni-icons>
					<text style="font-size: 12px;padding-top: 3px;">存草稿</text>
				</view>
				<view class="form_bottom_right">
					<u-button class="button" type="primary">提交</u-button>
				</view>
			</view>
	</view>
	<!-- c查看表表 -->
	<view v-show="showTabs==1" class="">
		查看列表
	</view>
	<view v-show="showTabs==2" class="lists">
				 
		<view class="list_item" v-for="(item,index) in list" :key="index" @click="tooutgoingInfo(item)">
			<view class="top">
				<view class="left">{{item.applyUserName}}提交的请假单</view>
						<view class="right">{{item.applyTime}}</view>
			</view>
					<view class="body">
						<view class=""><span>开始时间:</span> {{item.leaveStartTime}}</view>
						<view class=""><span>结束时间:</span>{{item.leaveEndTime}}</view>
						<view class=""><span>时长:</span>{{item.leaveDuration}}</view>
					</view>
					<view class="bottom">
						<view class="left">
							<view class="left_item">
							 <u-avatar font-size="8" bg-color="#3286ed" shape="square" size="25" :text="item.applyUserName.substr(1,2)"   ></u-avatar>
								<view class="text"> 由{{item.applyUserName}}提交</view>
							</view>
						</view>
						<view class="right">
							<span>审批通过</span>
						</view>
					</view>
		</view>
	</view>
	<!-- 请假类型 -->
		<u-picker :show="showType" :closeOnClickOverlay="true" :columns="leaveTypeOptions" keyName="dictLabel" @confirm="leavconfirm" @cancel="showType=false" ></u-picker>
	<u-datetime-picker @confirm="confirmTime" :show="show" v-model="value1" mode="datetime" @cancel="show=false"></u-datetime-picker>
	 <u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import { getDicts} from '@/api/dictionary/index.js'
import {listOaLeaveApproval,getOaLeaveApproval,addOaLeaveApproval,updateOaLeaveApproval} from "@/api/OA/leave.js"
	export default {
		data() {
			return {
				list1:[
					{name:'发起提交'},
					{name:'查看报表'},
					{name:'查看数据'},
				],
				index:0,
				form:{
				   leaveStartTime: null,
				   leaveEndTime: null,
				   leaveDuration: null,
				   leaveType: null,
				   leaveReason: null,
				   applyUserId: null,
				   applyUserName: null,
				   applyTime: null,
				},
				leaveType:null,
				rules:{
		leaveTypedou:[{required:true,message:'请选择请假类型',trigger:['blur','change']}],
        leaveStartTime:[{required:true,message:'请选择开始时间',trigger:['blur','change']}],
        leaveEndTime:[{required:true,message:'请选择结束时间',trigger:['blur','change']}],
        leaveDuration:[{required:true,message:'时长',trigger:['blur','change']}],
        leaveReason:[{required:true,message:'请假原因',trigger:['blur','change']}],
				},
				showTabs:0,
				
				leaveTypeOptions:[],
				showType:false,//请假类型
				value1:Number(new Date()),
				show:false,
				num:null,
				leaveStartTime:null,
				leaveEndTime:null,
				list:[],//数据list
				 
			};
		},
		created() {
			this.getLeaveType()
			this.getList()
		},
		methods:{
			// tabs切换
			clickTabs(val){
				
				this.index=val.index
				this.showTabs=val.index
				
			},
			// 获取请假类型
			getLeaveType(){
			  getDicts('leave_type').then(res=>{
				  this.leaveTypeOptions.push(res.data)
			  })	
			},
			leavconfirm(val){
				this.form.leaveType=val.value[0].dictVlaue
				this.form.leaveTypedou=val.value[0].dictLabel
				this.showType=false
			},
			openTime(val){
				this.num=val
				this.show=true
			},
			confirmTime(val){
				if(this.num==1){
				this.form.leaveStartTime=this.shijianc(val.value)
				this.leaveStartTime=val.value
				this.show=false
				}else if(this.num==2){
					this.form.leaveEndTime=this.shijianc(val.value)
					this.leaveEndTime=val.value
					this.show=false
					this.form.leaveDuration=((this.leaveEndTime-this.leaveStartTime)/86400000).toFixed(1)
				}
				
			},
			// 时间格式转换
			  shijianc(time) {
			      let date = new Date(time)
			      let Y = date.getFullYear() + '-'
			      let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
			      let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
			      let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
			      let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
			      let s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
			      return Y + M + D + h + m + s
			    },
			// 新增
			addForm(){
				this.$refs.form.validate().then(res=>{
						 
						this.form.leaveDuration=Number(this.form.leaveDuration)
						if(res){
							if(this.form.id){
								var that=this
								updateOaLeaveApproval(this.form).then(res=>{
									if(res){
										
										this.$refs.uToast.show({
											type:'success',
											message:'修改成功',
											complete(){
												that.getList()
											}
											
										})
									}
								}) 
							}else{
							var that=this
								addOaLeaveApproval(this.form).then(res=>{
									if(res){
										this.$refs.uToast.show({
											type:'success',
											message:'新增成功',
											complete(){
												that.getList()
												that.showTabs=2
												that.index=2
											}
										})
									}
								})
							}
							
						} 
					})
					
			
			},
			// 获取外出数据
			async getList(){
				let res= await listOaLeaveApproval({applyUserId:this.form.applyUserId})
				this.list=res.rows
				
			},
			// 跳转详情页面
			tooutgoingInfo(val){
				uni.navigateTo({
					url:"/pages/OAPage/leave/leaveInfo/leaveInfo?id="+val.id
				})
			},
			backFn(){
				uni.navigateBack({delta:1})
			}
		}
	}
</script>

<style lang="scss">
.tabs{
	  margin-top: 8px;
	  background-color: #fff;
  }
  .form{
  	  margin-top: 10px;
  	
  	 
  	  .item{
  		   padding-left: 10px;
  		    padding-right: 10px;
  		   background-color: #fff;
  		  margin-bottom: 8px;
  	  }
  	  .form_bottom{
  		  background-color: #fff;
  		  position: fixed;
  		  bottom: 0;
  		  width: 100%;
  		  padding-bottom: 20px;
  		  padding-top: 15px;
  		  display: flex;
  		  padding-left:5px ;
  		  .form_bottom_left{
  			   display: flex;
  			   justify-content: center;
  			   flex-direction: column;
  			   align-items:center;
  		  }
  		  .form_bottom_right{
  			  display: flex;
  			  justify-content: center;
  			  flex-direction: column;
  			  align-items:center;
  			  width: 80%;
  			  padding-left: 10px;
  			  .button{
  				  border-radius: 10px;
  			  }
  		  }
  		  
  	  }
  	  
  }
  .lists{
  		  .list_item{
  			  background-color: #fff;
  			  padding: 10px;
  			  margin-top: 10px;
  			  .top{
  				  display: flex;
  				  justify-content: space-between;
  				  
  				  .left{
  					  font-size: 16px;
  				  }
  				  .right{
  					  font-size: 12px;
  					  color: #bec0c2;
  				  }
  			  }
  			  .body{
  				  font-size: 14px;
  				  color: #bec0c2;
  				  padding: 7px 0px;
  			  }
  			  .bottom{
  				 display: flex;
  				 justify-content: space-between;
  				 .left{
  					 font-size: 16px;
  					 .left_item{
  						 display: flex;
  						 .text{
  							 padding: 5px;
  							 font-size: 12px;
  						 }
  					 }
  				 }
  				  .right{
  					  font-size: 12px;
  					  color: #1dcf67;
  				  }
  			  }
  		  }
  }
</style>
